<template>
  <div>
    <van-icon name="arrow-left" size="25" :style="{ marginTop: '7px' }" @click="router.push('/homeindex')"/>
    <van-icon name="search" size="25" :style="{ marginTop: '7px',float:'right' }"/>
  </div>
  <br>
  <van-row>
    <van-col span="1"></van-col>
    <van-col span="22">
      <h2>{{ essaydata.title }}</h2>
    </van-col>
    <van-col span="1"></van-col>
  </van-row>
  <van-row>
    <van-col span="1"></van-col>

    <van-col span="4">
      <van-image
          round
          width="5rem"
          height="5rem"
          :src="user.headimg"
      />
    </van-col>
    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
    <van-col span="16">
      <br>
      {{ user.username }}
      <br>
      <font style="color: #999999">{{ dateFormat(essaydata.addtime) }}</font>
    </van-col>
    <van-col span="1"></van-col>
  </van-row>
  <van-row>
    <van-col span="1"></van-col>
    <van-col span="4">

    </van-col>
    &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
    <van-col span="16">
      <font style="color: #999999">{{ essaydata.num }}人阅读</font>
    </van-col>
    <van-col span="1"></van-col>
  </van-row>


  <van-row>
    <van-col span="1"></van-col>
    <van-col span="22">


      <div v-for="(item,key) in essaydata.data" :key="key">
        <span v-if="item.type==0" class="aac">
          <br><br>
          {{ item.ess }}
          <br><br>
        </span>
        <van-image
            v-if="item.type==1"
            :src="item.ess"
        />
      </div>


    </van-col>
    <van-col span="1"></van-col>
  </van-row>

</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
import {useRoute} from "vue-router";

let router = useRouter()
let route = useRoute()

let essaydata = ref([])
let user = ref({})

const dateFormat = (time) => {
  var date = new Date(time);
  var year = date.getFullYear();
  /* 在日期格式中，月份是从0开始的，因此要加0
   * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
   * */
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}

const findessay = (id) => {
  axios.get(`http://localhost:8000/user/essayfindone/?id=${id}`).then(res => {
    essaydata.value = res.data.data
    user.value = res.data.data.user
  })
}

onMounted(() => {
  let id = route.query.id
  findessay(id)
})

</script>

<style scoped>
.aac{
white-space: pre-line

}
</style>